<template>
	<view class="signBox">
		<view class="sign">
			<view class="paper">
				<canvas class="handWriting" disable-scroll="true" @touchstart="touchstart1" @touchmove="touchmove1"
					canvas-id="handWriting1">
				</canvas>
			</view>
			<view class="signBtn">
				<button size="14" type="primary" style="background-color:#02BF88" @click="sign1ok">完成签字</button>
				<button size="14" type="warn" @click="reSign1">重新签字</button>
			</view>
		</view>
		<!-- <view class="image" :hidden="src?false:true">
			<image :src="src"></image>
		</view> -->
	</view>
</template>

<script>
	import configIndex from "@/config/index";
	export default {
		data() {
			return {
				context1: null,
				hasDraw: false, //默认没有画
				src: null
			}
		},
		created() {
			var context1 = wx.createCanvasContext('handWriting1', this);
			context1.setStrokeStyle("#000000")
			context1.setLineWidth(3);
			this.context1 = context1;
		},
		methods: {
			touchstart1: function(e) {
				var context1 = this.context1;
				context1.moveTo(e.touches[0].x, e.touches[0].y);
				this.context1 = context1;
				this.hasDraw = true;
				// this.setData({

				//   context1: context1,
				//   hasDraw : true, //要签字了
				// });
			},
			touchmove1: function(e) {
				var x = e.touches[0].x;
				var y = e.touches[0].y;
				var context1 = this.context1;
				context1.setLineWidth(3);
				context1.lineTo(x, y);
				context1.stroke();
				context1.setLineCap('round');
				context1.draw(true);
				context1.moveTo(x, y);
			},
			reSign1: function() {
				//重新画
				var that = this;
				var context1 = that.context1;
				context1.draw(); //清空画布
				that.hasDraw = false;
				that.src = null;
				// that.setData({

				// 	hasDraw: false, //没有画
				// 	src: null
				// });
				this.$emit('close')
			},
			sign1ok: function() {
				var that = this;
				if (!that.hasDraw) {
					uni.showToast({
						title: '签字是空白的 没有签字',
						icon: 'error'
					})
				} else {
					var context1 = that.context1;
					context1.draw(true, uni.canvasToTempFilePath({
						canvasId: 'handWriting1',
						success(res) {
							// console.log(res.tempFilePath) //得到了图片下面自己写上传吧
							that.src = res.tempFilePath;
							uni.uploadFile({
								url: configIndex.baseURL + '/file/uploadImage',
								filePath: res.tempFilePath,
								name: 'file',
								 header: {
									"Authentication": that.$storage.getItem('accessToken')
								},
								success: resc => {
									that.$emit('success',JSON.parse(resc.data).file);
								},
								fail:error => {
									console.error(error,'error')
								}
							})
						},
						fail(res) {
							console.error(res,'fail')
						}
					}, this))
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.signBox {
		padding-right: 100rpx;
		box-sizing: border-box;
	}
	.paper {
		background-color: #F7F8FA;
		margin: 10px;
		height: 120px;
		width: 100%;
	}

	.image {
		border: 1px solid #dedede;
		margin: 10px;
		height: 160px
	}

	.signBtn {
		display: flex;
		margin-top: 20px;
	}

	.signTitle {
		text-align: center;
		font-size: 1.2em;
		margin: 10px auto;
	}

	.handWriting {
		width: 100%;
		height: 120px;
	}

	.image image {
		width: 100%;
		height: 160px
	}
</style>
